<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="1024" height="700" style="border: 1px solid #999;display:block;margin: 0 auto;">
        当前浏览器不支持Canvas
    </canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('canvas');
            let context = canvas.getContext('2d');
            
            // 画一个弧线
            /*
                context.arc(
                    context,centery,radius,
                    startingAngle,endingAngle,
                    anticlockwise = false //false表示顺时针，反之逆时针 ， 默认为顺时针
                )

            */

            context.stokeStyle = "#2c3e50";
            context.lineWidth = 5;
            // context.arc(
            //     200,200,200,0,1.5*Math.PI
            // );

            // context.arc(
            //     200,200,100,0,1.5*Math.PI
            // );
            // context.stroke();

            for(let i=0;i<10;i++) {
                context.beginPath();
                context.arc(50+100*i,60,40,0,2*Math.PI*(i+1)/10);
                context.closePath();//当我们绘制的图形不是封闭的时候--closePath会自动帮我们封闭--开始点和结束点
                                    //如果我们不想要它帮我们自动封闭--我们可以不适用closePath

                context.stroke();
            }

            for(let i=0;i<10;i++) {
                context.beginPath();
                context.arc(50+100*i,150,40,0,2*Math.PI*(i+1)/10);

                context.stroke();
            }

            for(let i=0;i<10;i++) {
                context.beginPath();
                context.arc(50+100*i,250,40,0,2*Math.PI*(i+1)/10);
                // 就算没有closePath -- 如果调用fill那么它也会进行自动填充
                context.fill();
            }
        }
    </script>
</body>
</html>  